<template>
    <el-form>
        <el-form-item prop="username">
            <el-input placeholder="用户名" v-model="loginForm.username"/>
        </el-form-item>
        <el-form-item prop="password">
            <el-input placeholder="密码" v-model="loginForm.password"/>
        </el-form-item>
        <el-button type="primary" @click="handleLogin">登录</el-button>
    </el-form>
</template>
<script setup lang="ts">
import {reactive,toRefs} from 'vue';
import {useUserStore} from '@/stores/user';
import {useRouter} from 'vue-router';
import useRouteQuery from '@/hooks/useRouteQuery';
const router = useRouter();
const userStore = useUserStore();
const {redirect,otherQuery} = useRouteQuery();
const loginState = reactive({
    loginForm:{
        username:'',
        password:''
    }
});
const {loginForm} = toRefs(loginState);
const handleLogin = async ()=>{
    console.log(loginState.loginForm)
    await userStore.toLogin(loginState.loginForm);
    router.push({
        path:redirect.value||'/home',
        query:otherQuery.value
    });
}
</script>